---
import Layout from "../layouts/Layout.astro";
import Prose from "../components/Prose.astro";
import Tag from "../components/Tag.astro";

import { getCollection, render } from "astro:content";
import Back from "../components/Back.astro";

// 1. Generate a new path for every collection entry
export async function getStaticPaths() {
  const linuxPosts = await getCollection("linux");
  const webDevPosts = await getCollection("web");
  const allPosts = [...linuxPosts, ...webDevPosts];
  return allPosts.map((post) => ({
    params: { id: post.id },
    props: { post },
  }));
}

// 2. For your template, you can get the entry directly from the prop
const { post } = Astro.props;
const { Content } = await render(post);
---

<Layout title={post.data.title + " | 陈刑's Tech Guides"}>
  {/* Post Header */}
  <header>
    <h1
      class="text-2xl md:text-5xl/15 tracking-tight md:tracking-normal font-black bg-light-blue
      px-4 md:px-6 py-2 border-b-3 uppercase"
    >
      {post.data.title}
    </h1>
    <div class="p-4 pt-2 border-b-3">
      <time class="mb-1 block">
        Published on
        {
          post.data.date.toLocaleDateString("en-US", {
            month: "long",
            day: "numeric",
            year: "numeric",
          })
        }
      </time>
      <div class="flex gap-2 flex-wrap">
        {post.data.tags.map((tag: string) => <Tag tag={tag} />)}
      </div>
    </div>
  </header>

  {/* Cover Image */}
  {
    (post.data.coverImage || post.data.coverImageCaption) && (
      <figure class="px-4 md:px-6 mt-6">
        {post.data.coverImage && (
          <img
            src={post.data.coverImage}
            alt={post.data.title}
            class="mx-auto h-auto max-h-128 object-contain border-3 border-black shadow-neo"
            loading="lazy"
            decoding="async"
          />
        )}
        {post.data.coverImageCaption && (
          <figcaption class="text-center italic mt-3">
            {post.data.coverImageCaption}
          </figcaption>
        )}
      </figure>
    )
  }

  {/* Post Content */}
  <Prose>
    <Content />
  </Prose>

  <Back class="px-4 md:px-6 flex justify-end" />
</Layout>
